<template>
	<view class="register-info-container">
		<view class="info-wrapper">
			<template v-for="(item,index) in formOption">
				<view class="info-item item_right" :key="index">
					<text class="label">{{ item.label }}:</text>
					<view class="value">
						<input type="text" v-model="infoFormData[item.prop]">
					</view>
				</view>
			</template>
			<view class="idCard-image-wrapper">
				<view class="image-item-wrapper" >
					<single-img-upload ref="frontRef" bgClassName='front' prop="idCardImageFront" v-model="infoFormData.idCardImageFront" ></single-img-upload>
				</view>
				<view class="image-item-wrapper">
					<single-img-upload ref="backRef" bgClassName='back' prop="idCardImageBack" v-model="infoFormData.idCardImageBack" ></single-img-upload>
				</view>
			</view>
		</view>
		<view class="info-wrapper">
			<view class="info-item">
				<text class="label">联系电话:</text>
				<view class="value phones">
					<template v-for="(pItem,pIdx) in infoFormData.phoneList">
						<view :key='pIdx'>
							<text class="phone-num" :class="{high: pItem.isCommonly}">{{ pItem.phone }}</text>
							<text v-if="pItem.isCommonly" class="isCommonly">常用</text>
						</view>
					</template>
				</view>
			</view>
			<view class="info-item">
				<text class="label">与遗嘱人关系:</text>
				<picker @change="handlePickerChange" :value="infoFormData.relation" :range="relaDicList">
					<view class="uni-input">{{relaDicList[infoFormData.relation] || '请选择 >'}}</view>
				</picker>
			</view>
		</view>
		
	</view>
</template>

<script>
	import SingleImgUpload from "@/components/SingleImgUpload.vue"
	export default {
		components:{
			SingleImgUpload
		},
		data() {
			return {
				showRelat: false,
				formOption: [{
						label: "真实姓名",
						prop: "name",
						type: "text"
					},
					{
						label: "曾用名",
						prop: "oldName",
						type: "text"
					},
					{
						label: "身份证号",
						prop: "idCard",
						type: "text"
					},
					{
						label: "护照号",
						prop: "passportNo",
						type: "text"
					},
					{
						label: "性别",
						prop: "sex",
						type: "text",
					},
					{
						label: "国籍",
						prop: "nationality",
						type: "text"
					},
					{
						label: "住址",
						prop: "address",
						type: "text"
					},
					{
						label: "身份证",
						prop: "idCardImage",
						type: "null"
					}
				],
				infoFormData: {
					name: "张三",
					oldName: "无",
					idCard: "1455659865656561",
					passportNo: "无",
					sex: "男",
					nationality: "中国",
					address: "河南省郑州市商都世贸中心",
					idCardImageFront: '',
					idCardImageBack: '',
					phoneList: [{
							phone: "13212312311",
							isCommonly: true
						},
						{
							phone: "13242323424",
							isCommonly: false
						},
						{
							phone: "13223423221",
							isCommonly: false
						},
					],
					relation: ""
				},
				relaDicList:["关系1", '关系2'],
				
			}
		},
		methods: {
			// 选择回调
			handlePickerChange(data) {
				this.infoFormData.relation = data.detail.value
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.register-info-container {
		padding: 20rpx 20rpx;

		.info-wrapper {
			width: calc(100% - 60rpx);
			background-color: #FFFFFF;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.info-item {
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				line-height: 2.5;

				.label {
					font-weight: bold;
					color: #363636;
					display: inline-block;
				}

				.value {
					color: #a8a8a8;

					input {
						width: 100%;
						text-align: right;
					}
				}

				&.item_right {
					align-items: center;

					.value {
						flex: 1;
					}
				}

				.phones {
					line-height: 2;
					font-weight: bold;

					.high {
						color: #000000;
					}

					.isCommonly {
						display: inline-block;
						margin-left: 10rpx;
						border-radius: 15rpx;
						background-color: #ffe6e2;
						color: #c29089;
						font-size: 18rpx;
						padding: 4rpx 10rpx;
						transform: translateY(-5rpx);
					}
				}
			}

			.idCard-image-wrapper {
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0;

				.image-item-wrapper {
					width: 48%;
					height: 200rpx;
					background-size: 100% 100%;
					.front{
						background-image: url(../../static/images/regInfo/idCardFront.png) ;
					}
					.back{
						background-image: url(../../static/images/regInfo/idCardBack.png) ;
					}
				}
			}
		}
	}
</style>
